<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchCasesAPI } from '@/apis/fetchCases'
import { useProjectConfigStore } from '@/store/projectConfig'
import router from '@/router'

const projectConfigStore = useProjectConfigStore()

/* -------------------------------- 搜索 START -------------------------------- */
// 搜索框文字内容
const searchText = ref('')

/**
 * @description 处理搜索框内容变动时的回调
 *
 * @param e - 输入事件
 */
function handleChangeSearchText(e: Event) {
  const el = e.target as HTMLInputElement
  searchText.value = el.value
}

/**
 * @description 处理确定搜索的回调
 */
function handleConfirmSearch() {

}
/* --------------------------------- 搜索 END --------------------------------- */

/* ------------------------------- 列表数据 START ------------------------------- */
// 案例数据
const { dataList, loading, loadingMore, noMore, loadMore, refresh } = useLoadMore<LoadMoreData<Case>>(
  fetchCases,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

// 页面加载时请求一次
onMounted(() => {
  refresh()
})

// 页面滑动触底时请求更多数据
onReachBottom(() => {
  loadMore()
})

// 选中的 tab 的 index
const selectedTabIndex = ref(0)

/**
 * @description 处理 tab 选中时的回调
 *
 * @param index - tab 的 index
 */
function handleSelectTab(index: number) {
  if (selectedTabIndex.value !== index) {
    selectedTabIndex.value = index
    refresh()
  }
}

/**
 * @description useLoadMore 所必需的服务函数
 *
 * @param d - useLoadMore 中的 `data`
 */
async function fetchCases(d?: LoadMoreData<Case>): Promise<LoadMoreData<Case>> {
  const _page = d?.page ? d.page + 1 : 1
  const res = await fetchCasesAPI({
    type_id: projectConfigStore.caseTypeList[selectedTabIndex.value].id,
    page: _page.toString(),
    limit: '10',
  })
  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}
/* -------------------------------- 列表数据 END -------------------------------- */

function handleTapCaseItem(caseItem: Case) {
  if (caseItem.id) {
    router.push({
      name: 'caseDetail',
      params: {
        case_id: caseItem.id?.toString(),
      },
    })
  }
}
</script>

<template>
  <Spacer height="30" />
  <SearchBar @change="handleChangeSearchText" @confirm="handleConfirmSearch" />
  <Spacer height="30" />
  <DesignCaseTabs :selected-index="selectedTabIndex" @select="handleSelectTab" />
  <Spacer height="25" />
  <!-- Loading 骨架屏 -->
  <view v-if="loading && !loadingMore" class="w-full h-full bg-#F8F8F8">
    <CaseItemSkeleton v-for="i in 6" :key="i" />
  </view>
  <block v-else>
    <!-- 真实列表 -->
    <uv-list v-if="dataList.length > 0" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0) !important' }">
      <uv-list-item v-for="item in dataList" :key="item.id" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0) !important' }">
        <CaseItemCard :picture="item.image" :title="item.name" :subtitle="item.introduction" @tap="() => handleTapCaseItem(item)" />
      </uv-list-item>
      <uv-load-more v-if="dataList?.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
    </uv-list>
    <!-- 缺省页 -->
    <PageDefault v-else />
  </block>
</template>

<route lang="yaml">
name: 'cases'
style:
  navigationBarTitleText: '案例'
  onReachBottomDistance: 100
</route>
